<div class="execution-result">

  <div *ngIf="!model.id" class="row">
    <form [formGroup]="form" class="my-validate-form">
      <div class="form-group row">
        <div class="result-button col-sm-8">
          <div *ngIf="model.childrenCount" class="module-tips">
            <div class="row header">执行状态：</div>

            <div *ngIf="model.childrenCount.untest" class="row">
              <label class="col-sm-2">未执行</label>
              <div class="col-sm-10">{{model.childrenCount.untest}}个</div>
            </div>
            <div *ngIf="model.childrenCount.pass" class="row">
              <label class="col-sm-2">通过</label>
              <div class="col-sm-10">{{model.childrenCount.pass}}个</div>
            </div>
            <div *ngIf="model.childrenCount.fail" class="row">
              <label class="col-sm-2">失败</label>
              <div class="col-sm-10">{{model.childrenCount.fail}}个</div>
            </div>
            <div *ngIf="model.childrenCount.block" class="row">
              <label class="col-sm-2">阻塞</label>
              <div class="col-sm-10">{{model.childrenCount.block}}个</div>
            </div>
          </div>
        </div>
        <div class="result-button col-sm-4">
          <button (click)="returnTo()" type="button"
                  class="button-right btn btn-primary btn-with-icon btn-sm back">
            <i class="fa fa-arrow-circle-left"></i>返回
          </button>
        </div>
      </div>
    </form>
  </div>

  <div *ngIf="model.id" class="row">
    <form [formGroup]="form" (ngSubmit)="save()" class="my-validate-form">
      <div class="form-group row">
        <div class="result-button col-sm-12">
          <button *ngIf="canExe" (click)="setResult('pass')" type="button" class="btn btn-primary btn-sm">通过</button>
          <button *ngIf="canExe" (click)="setResult('fail')" type="button" class="btn btn-danger btn-sm">失败</button>
          <button *ngIf="canExe" (click)="setResult('block')" type="button" class="btn btn-warning btn-sm">阻塞</button>

          <label *ngIf="canExe" class="col-form-label form-check-label">
            <input [(ngModel)]="next" formControlName="next" name="next"
                   class="form-check-input form-control-lg" type="checkbox" value="true">
            &nbsp;同时转到下一个
          </label>

          <button (click)="returnTo()" type="button"
                  class="button-right btn btn-primary btn-with-icon btn-sm back">
            <i class="fa fa-arrow-circle-left"></i>返回
          </button>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-sm-2 case-id">TC-{{model.id}}</div>
        <div class="col-sm-10">
          <case-field-show [model]="model" [elemCode]="'name'"
                           (onSave)="saveField($event)" [form]="form">
          </case-field-show>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-sm-12">

          <div class="tabs-container light">
            <div class="tabs">
              <ngb-tabset (tabChange)="tabChange($event)">
                <ngb-tab id="info">
                  <ng-template ngbTabTitle>信息</ng-template>
                  <ng-template ngbTabContent></ng-template>
                </ngb-tab>
                <ngb-tab id="result">
                  <ng-template ngbTabTitle>结果</ng-template>
                  <ng-template ngbTabContent></ng-template>
                </ngb-tab>
                <ngb-tab id="history">
                  <ng-template ngbTabTitle>历史</ng-template>
                  <ng-template ngbTabContent></ng-template>
                </ngb-tab>
              </ngb-tabset>
            </div>
          </div>

        </div>
      </div>

      <div [class.hidden]="tab != 'info'">

        <div class="row">
          <div class="col-sm-12 property">
            <table class="io">
              <tbody>
              <tr>
                <td style="width: 25%">
                  <div class="label">状态</div>
                  {{model.status | caseExeStatus}}
                </td>

                <td style="width: 25%">
                  <div class="label">类型</div>
                  <case-field-show [model]="model" [elemCode]="'typeId'"
                                   (onSave)="saveField($event)" [form]="form">
                  </case-field-show>
                </td>
                <td style="width: 25%">
                  <div class="label">优先级</div>
                  <case-field-show [model]="model" [elemCode]="'priorityId'"
                                   (onSave)="saveField($event)" [form]="form">
                  </case-field-show>
                </td>
                <td style="width: 25%">
                  <div class="label">耗时(分钟)</div>
                  <div class="value">
                    <case-field-show [model]="model" [elemCode]="'estimate'"
                                     (onSave)="saveField($event)" [form]="form">
                    </case-field-show>
                  </div>
                </td>
              </tr>
              <tr>
              </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="row field-show-container">
          <div class="col-sm-2 field-show-label">测试目标</div>
          <div class="col-sm-11">
            <case-field-show [model]="model" [elemCode]="'objective'"
                             (onSave)="saveField($event)" [form]="form">
            </case-field-show>
          </div>
        </div>

        <div *ngFor="let elem of customFields;" class="row field-show-container">
          <div class="col-sm-2 field-show-label">{{elem.label}}</div>
          <div class="col-sm-10">
            <case-field-show [model]="model" [elem]="elem"
                             (onSave)="saveField($event)" [form]="form">
            </case-field-show>
          </div>
        </div>

        <div class="form-group row">
          <div class="col-sm-10">
            <div class="tabs-container light">
              <div class="tabs">
                <ngb-tabset>
                  <ngb-tab id="content">
                    <ng-template ngbTabTitle>测试步骤</ng-template>
                    <ng-template ngbTabContent></ng-template>
                  </ngb-tab>
                </ngb-tabset>
              </div>
            </div>
          </div>
          <div *ngIf="canEdit" class="contentType col-sm-2">
          <span *ngIf="model.contentType=='richText'" (click)="changeContentType('steps')" class="link">
            <i class="fa fa-th"></i>
            切换到表格
          </span>
            <span *ngIf="model.contentType=='steps'" (click)="changeContentType('richText')" class="link">
            <i class="fa fa-file-text-o"></i>
              切换到富文本
          </span>
          </div>
        </div>
        <div class="tab-steps form-group row">
          <div class="col-sm-12">
            <div *ngIf="'steps'==model.contentType">
              <steps-table [settings]="settings"
                           [source]="model.steps"
                           (upConfirm)="onUpConfirm($event)"
                           (downConfirm)="onDownConfirm($event)"

                           (createConfirm)="onCreateConfirm($event)"
                           (saveConfirm)="onSaveConfirm($event)"
                           (deleteConfirm)="onDeleteConfirm($event)"
              ></steps-table>
            </div>
            <div *ngIf="'richText'==model.contentType">
              <case-field-show [model]="model" [elemCode]="'content'"
                               (onSave)="saveField($event)" [form]="form">
              </case-field-show>
            </div>
          </div>
        </div>
      </div>

      <div [class.hidden]="tab != 'result'" class="tab-summary">
        <div class="form-group row">
          <label class="col-sm-1 col-form-label"><span>实际结果</span></label>
          <div *ngIf="canExe" class="col-sm-11">
            <textarea type="text" class="form-control" name="result" formControlName="result"
                      [(ngModel)]="model.result" #result></textarea>
          </div>
          <label *ngIf="!canExe" class="col-sm-11 col-form-label">
            {{model.result}}
          </label>
        </div>

        <div class="form-group row">
          <label class="col-sm-1">
            <span>问题</span>
          </label>
          <div class="col-sm-11">

            <div class="issue-list">
              <div class="item">
                <div class="descr"></div>
                <div class="opts">
                  <span (click)="createIssue()" class="link">创建</span>
                </div>
              </div>

              <div *ngFor="let item of model.issues;" class="item">
                <div class="descr">
                  <span>IS-{{item.issueId}}</span>
                  <span>{{item.title}}</span>
                </div>
                <div class="opts">
                  <span (click)="viewIssue(item)" class="link">查看</span>
                  <span (click)="removeIssue(item)" class="link">删除</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div [class.hidden]="tab != 'history'" class="tab-history">
        <div class="activity">
          <div class="list">
            <div *ngFor="let his of model.histories; let i = index;" class="item">
              <div class="descr">
                <span [innerHTML]="his.title" class="content"></span> -
                <span>{{his.createTime | date:'y/MM/dd HH:mm:ss'}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <br/>

      <div class="form-group row">
        <div class="col-sm-1">
          <file-uploader (uploadedEvent)="uploadedEvent($event)"
                         [ifile]="model.testsetPath" [mimeType]="[]" [showDropZone]="false"></file-uploader>
        </div>
        <div class="col-sm-11">
          <label class="attach-list">
            <span *ngFor="let attach of model.attachments; let i = index;" class="attach-item">
              <span (click)="removeAttachment(attach)" class="fa fa-times pointer" tabindex="-1"></span>
              <a href="{{attach.uri | pathToLink:attach.name}}" target="_blank" class="download pointer">{{attach.name}}</a>
            </span>
          </label>
        </div>
      </div>

      <comment-list [model]="model" [modelType]="'case_in_task'"></comment-list>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
          <div class="validate-errors">
            <div class="validate-error" *ngFor="let msg of formErrors">
              <div>{{ msg }}</div>
            </div>
          </div>
        </div>
      </div>

    </form>
  </div>

</div>
